<INPUT>NN all   IE all   HTML all
<INPUT>End Tag: Forbidden
 

An INPUT element is sometimes known as a form control, although not all INPUT elements are visible on the page. For the most part, an INPUT element provides a place for users to enter text, click buttons, and make selections from lists. The data gathered from this interaction can be submitted to a server-side program (when the surrounding FORM element is submitted), or it may be used strictly on the client as a way for users to interact with client-side scripts.

Prior to HTML 4.0, INPUT elements were supposed to be wrapped by a FORM element in all instances. This restriction is loosening up, but Navigator 4 still requires the FORM wrapper in order to render INPUT elements.

The primary attribute that determines the kind of control that is displayed on the page is the TYPE attribute. This attribute can have one of the following values: button, checkbox, file, hidden, image, password, radio, reset, submit, or text. Not all INPUT element types utilize the full range of other attributes; sometimes a single attribute has different powers with different element types. For each attribute of the INPUT element, the listing specifies the types to which it applies. Although the TEXTAREA element has its own tag, it is often treated like another form control.

 
Example
<FORM METHOD=post ACTION="http://www.giantco.com/cgi-bin/query">
First Name: <INPUT TYPE="text" NAME="first" MAXLENGTH=15><BR>
Last Name: <INPUT TYPE="text" NAME="last" MAXLENGTH=25><BR>
ZIP Code: <INPUT TYPE="text" NAME="zip" MAXLENGTH=10><BR>
<INPUT TYPE="reset">
<INPUT TYPE="submit">
</FORM>
 
Object Model Reference
NN [window.]document.formName.inputName
[window.]document.forms[i].elements[i]
IE [window.]document.formName.inputName
[window.]document.forms[i].elements[i]
[window.]document.all.elementID
ACCEPTNN n/a   IE n/a   HTML 4
ACCEPT="MIMETypeList"Optional
 

Specifies one or more MIME types for allowable files to be uploaded to the server when the form is submitted. The predicted implementation of this attribute would filter the file types listed in file dialogs used to select files for uploading. In a way, this attribute provides client-side validation of a file type so that files not conforming to the permitted MIME type is not even sent to the server. The HTML 4.0 specification also has this attribute available in the FORM element. It is unclear whether the implementations in browsers will recognize this attribute in both places.

 
Input Types file
 
Example
<INPUT TYPE="file" ACCEPT="text/html, image/gif" ...>
 
Value
Case-insensitive MIME type (content type) value. For multiple items, a comma-delimited list is allowed.
 
Default None.
ACCESSKEYNN n/a   IE 4   HTML 4
ACCESSKEY="character"Optional
 

A single character key that brings focus to the input element. The browser and operating system determine if the user must press a modifier key (e.g., Ctrl, Alt, or Command) with the access key to activate the link. In IE 4/Windows, the Alt key is required, and the key is not case sensitive. This attribute does not work in IE 4/Mac.

 
Input Types button, checkbox, file, password, radio, reset, submit, text
 
Example
<INPUT TYPE="text" NAME="first" MAXLENGTH=15 ACCESSKEY="f"><BR>
 
Value
Single character of the document set.
 
Default None.
 
Object Model Reference
IE [window.]document.formName.inputName.accessKey
[window.]document.forms[i].elements[i].accessKey
[window.]document.all.elementID.accessKey
ALIGNNN all   IE all   HTML 3.2
ALIGN="alignmentConstant"Optional
 

Determines how the rectangle of the input image aligns within the context of the surrounding content. See the section "Alignment Constants" earlier in this chapter for a description of the possibilities defined in both Navigator and Internet Explorer for this attribute. Not all attribute values are valid in browsers prior to the Version 4 releases.

Both browsers follow the same rules on laying out content surrounding an image whose ALIGN attribute is set, but the actual results are sometimes difficult to predict when the surrounding content is complex. A thorough testing of rendering possibilities with browser windows set to various sizes prevents surprises later.

 
Input Types image
 
Example
<INPUT TYPE="image" NAME="icon" SRC="icon.gif" ALIGN="absmiddle">
 
Value
Case-insensitive constant value. All constant values are available in Navigator 4 and Internet Explorer 4.
 
Default bottom
 
Object Model Reference
IE [window.]document.formName.inputName.align
[window.]document.forms[i].elements[i].align
[window.]document.all.elementID.align
ALTNN n/a   IE 4   HTML 4
ALT="textMessage"Optional
 

If a browser is not capable of displaying graphical images (or has the feature turned off), the text assigned to the ALT attribute is supposed to display in the document where the image INPUT element's tag appears. Typically, this text provides advice on what the page visitor is missing by not being able to view the image.

 
Input Types image
 
Example
<INPUT TYPE="image" NAME="icon" SRC="sndIcon.gif" ALT="Sound Icon">
 
Value
Any quoted string of characters.
 
Default None.
 
Object Model Reference
IE [window.]document.formName.inputName.alt
[window.]document.forms[i].elements[i].alt
[window.]document.all.elementID.alt
BORDERNN 4   IE 4   HTML n/a
BORDER=pixelsOptional
 

Navigator and Internet Explorer treat images displayed by the INPUT element very much like IMG elements. As such, you can specify a border around the image. Navigator displays one by default. Because an INPUT element whose TYPE attribute is "image" acts as a submit-style button, the border is rendered in the browser's link colors. If you want a different color for a plain border, use style sheets (with the appropriate DIV or SPAN wrapper for Navigator 4). You can eliminate the colored border altogether in Navigator by setting the BORDER attribute size to zero.

 
Input Types image
 
Example
<INPUT TYPE="image" NAME="icon" SRC="sndIcon.gif" BORDER=0>
 
Value
Any integer pixel value.
 
Default 2 (Navigator 4) or 0 (Internet Explorer 4).
 
Object Model Reference
IE [window.]document.formName.inputName.border
[window.]document.forms[i].elements[i].border
[window.]document.all.elementID.border
CHECKEDNN 4   IE 3   HTML 4
CHECKEDOptional
 

A Boolean attribute that designates whether the current checkbox or radio INPUT element is turned on when the page loads. In the case of a radio button grouping, only one INPUT element should have the CHECKED attribute. Scripts can modify the internal value of this attribute after the page has loaded. When the form is submitted, an INPUT element whose CHECKED attribute is turned on sends its name/value pair as part of the form data. The name/value pair consists of values assigned to the NAME and VALUE attributes for the element. If no value is assigned to the VALUE attribute, the string value "active" is automatically assigned when the checkbox or radio button is highlighted. This is fine for checkboxes because each one should be uniquely named. However, all radio buttons in a related group must have the same name, so this default behavior doesn't provide enough information for most server-side programs to work with.

 
Input Types checkbox, radio
 
Example
<INPUT TYPE="checkbox" NAME="addToList" CHECKED>Send email updates to this 
web site.
 
Value
The presence of this attribute turns on its property.
 
Default Off.
 
Object Model Reference
NN [window.]document.formName.inputName.checked
[window.]document.forms[i].elements[i].checked
IE [window.]document.formName.inputName.checked
[window.]document.forms[i].elements[i].checked
[window.]document.all.elementID.checked
DATAFLDNN n/a   IE 4   HTML n/a
DATAFLD="columnName"Optional
 

Used with IE 4 data binding to associate a remote data source column name with parts of various INPUT elements. A DATASRC attribute must also be set for the element.

 
Input Types button, checkbox, hidden, password, radio, text
 
Example
<INPUT TYPE="text" NAME="first" DATASRC="#DBSRC3" DATAFLD="firstName">
 
Value
Case-sensitive identifier.
 
Default None.
 
Object Model Reference
IE [window.]document.formName.inputName.dataFld
[window.]document.forms[i].elements[i].dataFld
[window.]document.all.elementID.dataFld
DATASRCNN n/a   IE 4   HTML n/a
DATASRC="dataSourceName"Optional
 

Used with IE 4 data binding to specify the name of the remote ODBC data source (such as an Oracle or SQL Server database) to be associated with the element. Content from the data source is specified via the DATAFLD attribute.

 
Input Types button, checkbox, hidden, password, radio, text
 
Example
<INPUT TYPE="text" NAME="first" DATASRC="#DBSRC3" DATAFLD="firstName">
 
Value
Case-sensitive identifier.
 
Default None.
 
Object Model Reference
IE [window.]document.formName.inputName.dataSrc
[window.]document.forms[i].elements[i].dataSrc
[window.]document.all.elementID.dataSrc
DISABLEDNN n/a   IE 4   HTML 4
DISABLEDOptional
 

A disabled INPUT element appears grayed out on the screen and cannot be activated by the user. In Windows, a disabled form control cannot receive focus and does not become active within the tabbing order rotation. HTML 4.0 also specifies that the name/value pair of a disabled INPUT element should not be sent when the form is submitted. INPUT elements that normally perform submissions do not submit their form when disabled.

The DISABLED attribute is a Boolean type, which means that its presence in the attribute sets its value to true. Its value can also be adjusted after the fact by scripting (see the button object in ).

 
Input Types All.
 
Example
<BUTTON TYPE="submit" DISABLED>Ready to Submit </BUTTON>
 
Value
The presence of the attribute disables the element.
 
Default false
 
Object Model Reference
IE [window.]document.formName.inputName.disabled
[window.]document.forms[i].elements[i].disabled
[window.]document.all.elementID.disabled
IDNN n/a   IE 4   HTML 4
ID="elementIdentifier"Optional
 

A unique identifier that distinguishes this element from all the rest in the document. Can be used to associate a single element with a style rule naming this attribute value as an ID selector. Do not confuse the ID attribute with the NAME attribute, whose value is submitted as part of a name/value pair with the form.

 
Input Types All.
 
Example
<INPUT TYPE="button" ID="next" VALUE=">>Next>>" onClick="goNext(3)">
 
Value
Case-sensitive identifier.
 
Default None.
 
Object Model Reference
IE [window.]document.formName.inputName.id
[window.]document.forms[i].elements[i].id
[window.]document.all.elementID.id
MAXLENGTHNN all   IE all   HTML all
MAXLENGTH="characterCount"Optional
 

Defines the maximum number of characters that may be typed into a text field INPUT element. In practice, browsers beep or otherwise alert users when a typed character would exceed the MAXLENGTH value. There is no innate correlation between the MAXLENGTH and SIZE attributes. If the MAXLENGTH allows for more characters than fit within the specified width of the element, the browser provides horizontal scrolling (albeit awkward for many users) to allow entry and editing of the field.

 
Input Types password, text
 
Example
<INPUT TYPE="text" NAME="ZIP" MAXLENGTH=10>
 
Value
Positive integer.
 
Default Unlimited.
 
Object Model Reference
IE [window.]document.formName.inputName.maxLength
[window.]document.forms[i].elements[i].maxLength
[window.]document.all.elementID.maxLength
NAMENN all   IE all   HTML all
NAME="elementIdentifier"Optional
 

If the INPUT element is part of a form being submitted to a server, the NAME attribute is required if the value of the element is to be submitted with the form. For forms that are in documents for the convenience of scripted form elements, INPUT element names are not required but are helpful just the same in creating scripted references to these objects and their properties or methods.

 
Input Types All.
 
Example
<INPUT TYPE="text" NAME="ZIP" MAXLENGTH=10>
 
Value
Case-sensitive identifier.
 
Default None.
 
Object Model Reference
NN [window.]document.formName.inputName.name
[window.]document.forms[i].elements[i].name
IE [window.]document.formName.inputName.name
[window.]document.forms[i].elements[i].name
[window.]document.all.elementID.name
READONLYNN n/a   IE 4   HTML 4
READONLYOptional
 

When the READONLY attribute is present, the text field INPUT element cannot be edited on the page by the user (although scripts can modify the content). A field marked as READONLY should not receive focus within the tabbing order (although IE 4 for the Macintosh allows the field to receive focus).

 
Input Types password, text
 
Example
<INPUT TYPE="text" NAME="ZIP" READONLY>
 
Value
The presence of the attribute sets its value to true.
 
Default false
 
Object Model Reference
IE [window.]document.formName.inputName.readOnly
[window.]document.forms[i].elements[i].readOnly
[window.]document.all.elementID.readOnly
SIZENN all   IE all   HTML all
SIZE="elementWidth"Optional
 

In practice, the SIZE attribute is limited to describing the character width of text field INPUT elements. The actual rendered width is calculated based on the font setting (or default font) for the element, but the results are not always perfect. Variations in font rendering (and the ability to specify alternate font faces and sizes in Internet Explorer) sometimes lead to unexpectedly narrower fields. Therefore, it is not wise to automatically set the SIZE and MAXLENGTH attributes to the same value without testing the results on a wide variety of browsers and operating systems with worst-case data (for example, all "m" or "W" characters in proportional fonts). The HTML 4.0 specification indicates that the SIZE attribute might be applied to other INPUT element types, but as of the Version 4 browsers, this is not the case. In the meantime, you can use CSS-Positioning to make buttons wider than the default size that tracks the width of the VALUE attribute string.

 
Input Types password, text
 
Example
<INPUT TYPE="text" NAME="ZIP" MAXLENGTH=10 SIZE=12>
 
Value
Any positive integer.
 
Default 20
 
Object Model Reference
IE [window.]document.formName.inputName.size
[window.]document.forms[i].elements[i].size
[window.]document.all.elementID.size
SRCNN all   IE all   HTML all
SRC="URL"Required
 

URL to a file containing image data that is displayed through the INPUT element of type image. The browser must be equipped to handle the image MIME type. On the World Wide Web, the most common image formats are GIF and JPEG.

 
Input Types image
 
Example
<INPUT TYPE="image" NAME="icon" SRC="sndIcon.gif" BORDER=0>
 
Value
A complete or relative URL.
 
Default None.
 
Object Model Reference
IE [window.]document.formName.inputName.src
[window.]document.forms[i].elements[i].src
[window.]document.all.elementID.src
TABINDEXNN n/a   IE 3   HTML 4
TABINDEX=integerOptional
 

A number that indicates the sequence of this element within the tabbing order of all focusable elements in the document. Tabbing order follows a strict set of rules. Elements that have values other than zero assigned to their TABINDEX attributes are first in line when a user starts tabbing in a page. Focus starts with the element with the lowest TABINDEX value and proceeds in order to the highest value, regardless of physical location on the page or in the document. If two elements have the same TABINDEX values, the element that comes earlier in the document receives focus first. Next come all elements that either don't support the TABINDEX attribute or have the value set to zero. These elements receive focus in the order in which they appear in the document.

Note that the Macintosh user interface does not provide for giving focus to elements other than text and password INPUT fields.

 
Input Types button, checkbox, file, password, radio, reset, submit, text
 
Example
<INPUT TYPE="text" NAME="country" TABINDEX=3>
 
Value
Any integer from 0 through 32767. In IE 4, setting the TABINDEX to -1 causes the element to be skipped in tabbing order altogether.
 
Default None.
 
Object Model Reference
IE [window.]document.formName.inputName.tabIndex
[window.]document.forms[i].elements[i].tabIndex
[window.]document.all.elementID.tabIndex
TYPENN all   IE all   HTML all
TYPE="elementType"Required
 

Advises the browser how to render the INPUT element (or even whether the element should be rendered at all). Possible choices are as follows:

Type

Description

button

A clickable button whose action must be scripted. Its label is assigned by the VALUE attribute. If you want to use HTML to format the label of a button, use the BUTTON element instead.

checkbox

A free-standing checkbox that provides two states (active and inactive). Its label is created by HTML text before or after the INPUT element tag. The VALUE attribute value is submitted with a form, so you can have multiple checkboxes with the same name but different values if the server CGI script wants its data that way.

file

A button and field that lets the user select a local file for eventual uploading to the server. A click of the button generates a File dialog, and the name (or pathname) of the selected file appears in the field. The server must have a CGI script running to accept the incoming file at submission time.

hidden

An invisible field often used to carry over database or state data from submission to submission without bothering the user with its content (or having to store the temporary data on the server). The name/value pair is submitted with the form.

image

A graphical button whose sole action is to submit the form. The coordinate points x,y of the click on the image are submitted as two name/value pairs: inputName.x=n; inputName.y=m.

password

A text field that presents bullets or asterisks for each typed character to ensure over-the-shoulder privacy for the user. The plain-language text is submitted as the value for this element.

radio

One of a related group of on-off buttons. Assigning the same value to the NAME attribute of multiple radio buttons assembles them in a related group. Clicking on one button in the group activates it while unhighlighting all others. The VALUE attribute value is submitted with a form.

reset

A button whose sole job is to revert the form's elements to the values they had when the form initially loaded into the client. A custom label can be assigned via the VALUE attribute.

submit

A button whose sole job is to submit the form. A custom label can be assigned by the VALUE attribute. If NAME and VALUE attributes are assigned for the element, their values are submitted with the form.

text

A one-line field for typing text that gets submitted as the value of the element. For a multiple-line field, see the TEXTAREA element.

 
Example
<INPUT TYPE="button" VALUE="Toggle Sound" onClick="toggleSnd()">
<INPUT TYPE="checkbox" NAME="connections" VALUE="ISDN">ISDN
<INPUT TYPE="file" NAME="uploadFile">
<INPUT TYPE="hidden" NAME="prevState" VALUE="modify">
<INPUT TYPE="image" NAME="graphicSubmit" SRC="submit.jpg" HEIGHT=40 WIDTH=40>
<INPUT TYPE="password" NAME="password" MAXLENGTH=12 SIZE=20>
<INPUT TYPE="radio" NAME="creditCard" VALUE="Visa">Visa
<INPUT TYPE="reset">
<INPUT TYPE="submit" VALUE="Send Encrypted">
Social Security Number:<INPUT TYPE="text"NAME="ssn" VALUE="###-##-####" 
onClick="validateSSN(this)">
 
Value
Any one of the known INPUT element types: button | checkbox | file | hidden | image | password | radio | reset | submit | text.
 
Default text
 
Object Model Reference
NN [window.]document.formName.inputName.type
[window.]document.forms[i].elements[i].type
IE [window.]document.formName.inputName.type
[window.]document.forms[i].elements[i].type
[window.]document.all.elementID.type
USEMAPNN n/a   IE n/a   HTML 4
USEMAP="mapURL"Optional
 

The HTML 4.0 specification lists the USEMAP attribute for an INPUT element of type image. In the future, this might lead to a link between image INPUT elements and the scriptable powers of client-side image maps (such as rollovers), but for now, it is unknown for sure how this attribute will be implemented in browsers.

VALUENN all   IE all   HTML all
VALUE="text"Optional/Required
 

Preassigns a value to an INPUT element that is submitted to the server as part of the name/value pair for the element. Some INPUT element types are not submitted (an unchecked radio button, for example), but any value you associate with all but the button or reset type INPUT element reaches the server when the element is submitted.

In the case of text and password INPUT elements, the VALUE attribute contains a default entry. As the user makes a change to the content of the text field, the value changes, although the source code does not. When a form is reset (via a reset INPUT element), the default values are put back into the text fields.

The VALUE attribute is required only for checkbox and radio INPUT elements. For INPUT elements that are rendered as standard clickable buttons, the VALUE attribute defines the label that appears on the button.

 
Input Types All.
 
Example
<INPUT TYPE="checkbox" NAME="connections" VALUE="ISDN">ISDN
 
Value
Any text string.
 
Default None.
 
Object Model Reference
NN [window.]document.formName.inputName.value
[window.]document.forms[i].elements[i].value
IE [window.]document.formName.inputName.value
[window.]document.forms[i].elements[i].value
[window.]document.all.elementID.value